<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="never" class="card">
					<div id="charts_one" style="width:100%;min-height:80vh">
						<Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm = "searchForm" @refresh_list="index"></Search>
						<div class="btn-group" style="margin-bottom:11px;">
                           <div>
							                               <el-button type="primary" :disabled="single" size="mini" icon="el-icon-view"  @click="detail(ids)" v-if="checkPermission('/admin/OperLog/detail.html')" >查看详情</el-button>  
                           </div>
                           <table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refresh_list="index" :searchTool="true"></table-tool>
						</div>
						<el-table highlight-current-row @current-change="selection"  row-key="oper_id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">
							<el-table-column align="center" type = '' v-if="fieldList[0].checked" property="oper_id" label="ID" show-overflow-tooltip width="70">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[1].checked" property="title" label="模块标题" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[2].checked" property="business_type" label="业务类型" show-overflow-tooltip width="">
							       <template slot-scope="scope"> 
							          <el-tag type="primary" v-if="scope.row.business_type == '0'" size="mini" effect="dark">其它 </el-tag>
							          <el-tag type="info" v-if="scope.row.business_type == '1'" size="mini" effect="dark">新增</el-tag>
							          <el-tag type="success" v-if="scope.row.business_type == '2'" size="mini" effect="dark">修改</el-tag>
							          <el-tag type="warning" v-if="scope.row.business_type == '3'" size="mini" effect="dark">删除</el-tag>
							          <el-tag type="info" v-if="scope.row.business_type == '4'" size="mini" effect="dark">授权</el-tag>
							          <el-tag type="info" v-if="scope.row.business_type == '5'" size="mini" effect="dark">导出</el-tag>
							          <el-tag type="info" v-if="scope.row.business_type == '6'" size="mini" effect="dark">导入</el-tag>
							          <el-tag type="info" v-if="scope.row.business_type == '7'" size="mini" effect="dark">强退</el-tag>
							          <el-tag type="info" v-if="scope.row.business_type == '8'" size="mini" effect="dark">生成代码</el-tag>
							          <el-tag type="info" v-if="scope.row.business_type == '9'" size="mini" effect="dark">清空数据</el-tag>
							       </template>    
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[3].checked" property="method" label="方法名称" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[4].checked" property="operator_type" label="操作类别" show-overflow-tooltip width="">
							       <template slot-scope="scope"> 
							          <el-tag type="info" v-if="scope.row.operator_type == '0'" size="mini" effect="dark">其它</el-tag>
							          <el-tag type="primary" v-if="scope.row.operator_type == '1'" size="mini" effect="dark">后台用户</el-tag>
							          <el-tag type="success" v-if="scope.row.operator_type == '2'" size="mini" effect="dark">手机端用户</el-tag>
							       </template>    
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[5].checked" property="user_id" label="操作人员" show-overflow-tooltip width="">
							       <template slot-scope="scope">  
     								  {{getUser_idValue(scope.row.user_id)}}
      							   </template>
							 </el-table-column>
							<el-table-column align="center"  v-if="fieldList[6].checked" property="oper_url" label="请求URL" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[7].checked" property="oper_ip" label="主机地址" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[8].checked" property="oper_location" label="操作地点" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center>"  v-if="fieldList[9].checked" property="oper_param" label="请求参数" show-overflow-tooltip width="">
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[10].checked" property="status" label="操作状态" show-overflow-tooltip width="">
							       <template slot-scope="scope"> 
							          <el-tag type="primary" v-if="scope.row.status == '0'" size="mini" effect="dark">正常</el-tag>
							          <el-tag type="danger" v-if="scope.row.status == '1'" size="mini" effect="dark">异常</el-tag>
							       </template>    
							 </el-table-column>
							 <el-table-column align="center"  v-if="fieldList[11].checked" property="create_time" label="操作时间" show-overflow-tooltip width="">
								<template slot-scope="scope">
									{{parseTime(scope.row.create_time)}}
								</template>
							 </el-table-column>
						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!--查看详情-->
		<Detail :info="detailInfo" :show.sync="dialog.detailDialogStatus" size="small" @refresh_list="index"></Detail>
	</div>
</template>
<script>
	import {
	    index, 
	    updateExt, 
	} from '@/api/admin/operlog'
	import Search from '@/components/common/Search.vue'
	import Page from '@/components/common/Page.vue'
	import TableTool from '@/components/common/TableTool.vue'
	import { confirm,param2Obj } from '@/utils/common'
	import Detail from '@/views/admin/operlog/detail.vue'      
	export default {
		name:'operLog',
		components: {
			Search,
			Page,
			TableTool,
	        Detail,  
		},
		data(){
			return {
				dialog: {
	                    detailDialogStatus : false,     
				},
				fieldList:[
					{lable:'ID',checked:true},
				    {lable:'模块标题',checked:true},
				    {lable:'业务类型',checked:true},
				    {lable:'方法名称',checked:true},
				    {lable:'操作类别',checked:true},
				    {lable:'操作人员',checked:true},
				    {lable:'请求URL',checked:true},
				    {lable:'主机地址',checked:true},
				    {lable:'操作地点',checked:true},
				    {lable:'请求参数',checked:false},
				    {lable:'操作状态',checked:true},
				    {lable:'操作时间',checked:true},
				],
				ids: [],
				selectRows:[],
				selectTotal:0,
				single:true,
				multiple:true,
				list: [],
				small_tables:{},
	            detailInfo:{},
				loading: false,
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
				searchVisible:true,
				searchForm:[],
				searchData:{},
			}
		},
		methods: {
			index(){
				let param = {limit:this.page_data.limit,page:this.page_data.page}
				Object.assign(param, this.searchData,param2Obj(this.$route.fullPath))
				this.loading = true
				index(param).then(res => {
					this.list = res.data.data
					this.small_tables=res.sql_field_data
					this.page_data.total = res.data.total
					this.loading = false
					if(this.page_data.page == 1){
						this.searchForm = [
						       {type:'Select',label:'业务类型',prop:'business_type',data:[{"val":"0","label_color":"primary","key":"其它 "},{"val":"1","label_color":"info","key":"新增"},{"val":"2","label_color":"success","key":"修改"},{"val":"3","label_color":"warning","key":"删除"},{"val":"4","label_color":"info","key":"授权"},{"val":"5","key":"导出","label_color":"info"},{"val":"6","key":"导入","label_color":"info"},{"val":"7","label_color":"info","key":"强退"},{"val":"8","label_color":"info","key":"生成代码"},{"val":"9","label_color":"info","key":"清空数据"}],width:'150px'},
						       {type:'Select',label:'操作类别',prop:'operator_type',data:[{"val":"0","key":"其它","label_color":"info"},{"val":"1","key":"后台用户","label_color":"primary"},{"val":"2","key":"手机端用户","label_color":"success"}],width:'150px'},
						       {type:'Select',label:'操作人员',prop:'user_id',data:res.sql_field_data.user_ids,width:'150px'},
						        {type:'datetime',label:'操作时间',prop:'create_time',width:'150px'},
						]
					}
				})
			},
			getUser_idValue(e) {
               for (var i = 0; i < this.small_tables.user_ids.length; i++) {
                 if (this.small_tables.user_ids[i].val == e) {
                    return this.small_tables.user_ids[i].key;
                 }
               }
             },
			updateExt(row,field){
				if(row.oper_id){
					updateExt({oper_id:row.oper_id,[field]:row[field]}).then(res => {
						this.$message({message: '操作成功', type: 'success'})
					})
				}
			},
			detail(row){
				this.dialog.detailDialogStatus = true
				this.detailInfo = {oper_id:row.oper_id ? row.oper_id : this.ids.join(',')}
			},
		    selection(selection) {
		        this.selectRows=[]
		        this.selectRows.push(selection)
		        this.selectTotal=this.selectRows.length
				this.ids = []
				this.ids.push(selection.oper_id)
				this.single = false
			 },
		},	
		mounted(){
			this.index()
		}
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>